<template>
  <div>
    <el-card>
      <!-- 歌单图片以及信息 -->
      <div class="detail-desc">
        <!-- 歌单图片 -->
        <div class="detail-img-wrapper">
          <img class="img img-radius-4" :src="info.coverImgUrl" alt="" />
        </div>
        <!-- 歌单信息 -->
        <div class="detail-desc-info">
          <div class="info-title">
            <el-tag type="danger">歌单</el-tag>
            <span class="mleft-12 font-20 font-bold">{{ info.name }}</span>
          </div>
          <!-- 歌单作者 -->
          <div class="author">
            <div class="author-img">
              <img class="img-h circle" :src="info.creator.avatarUrl" alt="" />
            </div>
            <div class="author-info">
              <span class="mleft-12 font-12">{{ info.creator.nickname }}</span>
              <span class="mleft-12 font-12">{{
                info.createTime | dateFormat
              }}</span>
            </div>
          </div>
          <!-- 歌单按钮 -->
          <ul class="inf0-btn">
            <el-button type="danger" round @click="playAll">
              <i class="el-icon-video-play"></i> 播放全部</el-button
            >
            <el-button round v-if="!subscribed" @click="subPlaylist(1)"
              ><i class="el-icon-star-off"></i>收藏({{
                info.subscribedCount | countFormat
              }})</el-button
            >
            <el-button round v-else @click="subPlaylist(2)"
              ><i class="el-icon-star-on"></i>已收藏({{
                info.subscribedCount | countFormat
              }})</el-button
            >
            <el-button round
              ><i class="el-icon-position"></i>分享({{
                info.shareCount | countFormat
              }})</el-button
            >
          </ul>
          <div class="mtop-5 font-14" v-if="info.tags.length !== 0">
            <span>标签：</span>
            <span
              class="marght-10"
              v-for="(val, index) in info.tags"
              :key="index"
            >
              {{ val }}
            </span>
          </div>
          <div class="num-info font-14">
            <span>歌曲：{{ info.trackCount }}</span>
            <span class="mleft-12"
              >播放：{{ info.playCount | countFormat }}</span
            >
          </div>
          <!-- 歌单描述 -->
          <div class="font-14">
            <input type="checkbox" id="check" />
            <div class="element">
              <p>简介：{{ info.description }}</p>
            </div>
            <label for="check" class="check-in"
              ><i class="el-icon-caret-bottom font-16"></i
            ></label>
            <label for="check" class="check-out"
              ><i class="el-icon-caret-top font-16"></i
            ></label>
          </div>
        </div>
      </div>
      <!-- 歌单tag展示 -->
      <el-tabs v-model="activename">
        <el-tab-pane label="歌曲列表" name="first">
          <MusicList :list="list" ref="listRef"></MusicList>
        </el-tab-pane>
        <el-tab-pane
          :label="'评论' + '(' + info.shareCount + ')'"
          name="second"
        >
          <Commenet
            :hotCommentList="hotCommentList"
            :newCommentList="newCommentList"
            :type="2"
            :id="sheetid"
            @getNew="getNewCommentList"
          ></Commenet>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="newParams.pageNo"
            :page-size="newParams.pageSize"
            layout="prev, pager, next"
            :total="total"
            align="center"
            background
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="收藏者" name="third">
          <FollowList :followlist="followlist"></FollowList>
          <el-pagination
            @current-change="handleFollowCurrentChange"
            :current-page="pageInfo.currentPage"
            :page-size="30"
            layout="prev, pager, next"
            :total="pageInfo.total"
            align="center"
            background
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  getPlayListDetail,
  getPlayDetailMusicList,
  getComment,
  getHotComment,
  getSuberList,
  setPlaylistSub,
} from "../../api/request";
import MusicList from "../../components/list/MusicList.vue";
import Commenet from "../../components/list/commentList.vue";
import FollowList from "../../components/list/FollowList.vue";
import { mapState } from "vuex";
export default {
  components: { MusicList, Commenet, FollowList },
  data() {
    return {
      sheetid: "",
      info: {},
      playList: [],
      activename: "first",
      list: [],
      hotCommentList: [],
      // 最新评论参数
      newParams: {
        id: this.$route.params.id,
        type: 2,
        pageNo: 1,
        pageSize: 10,
        sortType: 3,
        cursor: 0,
      },
      total: 0,
      newCommentList: [],
      followlist: [],
      pageInfo: {
        currentPage: 1,
        total: 0,
      },
      subscribed: false, //是否收藏
    };
  },
  computed: {
    ...mapState(["isLogin", "profile"]),
    // subDisabled(){
    //   if(this.isLogin) return this.info.userId === this.profile.userId;
    //   else return false ;
    // }
  },
  created() {
    this.sheetid = this.$route.params.id;
    this.getPlayList(this.sheetid);
    this.getMusicList(this.sheetid, 20);
    this.gethotCommentList(this.sheetid, 2, 10);
    this.getNewCommentList();
    this.getFollowList();
    this.isSubscribed();
  },
  methods: {
    // 获取歌单信息
    async getPlayList(id) {
      const { data: res } = await getPlayListDetail(id);
      this.info = res.playlist;
      this.playList = res.playlist.tracks;
    },
    // 获取歌单内歌曲
    async getMusicList(id, limit) {
      const { data: res } = await getPlayDetailMusicList(id, limit);
      if (res.code !== 200) return this.$message.error("请求歌单错误");
      this.list = res.songs;
    },
    // 获取热门评论
    async gethotCommentList(id, type, limit) {
      const { data: res } = await getHotComment(id, type, limit);
      if (res.code !== 200) return this.$message.error("获取热门评论失败");
      this.hotCommentList = res.hotComments;
    },
    //最新评论参数
    async getNewCommentList() {
      const { data: res } = await getComment(this.newParams);
      if (res.code !== 200) return this.$message.error("获取最近评论失败");
      this.newCommentList = res.data.comments;
      this.newParams.cursor = res.data.cursor;
      this.total = res.data.totalCount;
    },
    // 评论分页器
    handleCurrentChange(val) {
      this.newParams.pageNo = val;
      this.newParams.sortType = 3;
      this.$scrollTo();
      this.getNewCommentList();
    },
    // 获取收藏者信息的请求
    async getFollowList() {
      const { data: res } = await getSuberList({
        id: this.sheetid,
        offset: (this.pageInfo.currentPage - 1) * 30,
      });
      if (res.code !== 200) return this.$message.error("获取收藏列表失败");
      this.followlist = res.subscribers;
      this.pageInfo.total = res.total;
    },
    // 收藏者分页器
    handleFollowCurrentChange(val) {
      this.pageInfo.currentPage = val;
      this.$scrollTo();
      this.getFollowList();
    },
    //显示是否收藏
    isSubscribed() {
      if (this.isLogin) {
        if (this.info.userId === this.profile.userId) {
          this.subscribed = true;
        } else {
          this.subscribed = false;
        }
      }
    },
    //收藏/取消收藏歌单
    async subPlaylist(type) {
      if (!this.isLogin) return this.$message.error("请先登录");
      let cancel = false;
      if (this.subscribed) {
        await this.$confirm("是否取消收藏, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            cancel = false;
          })
          .catch(() => {
            cancel = true;
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      }
      if (cancel) return;
      const { data: res } = await setPlaylistSub(this.sheetid, type);
      if (res.code !== 200) return;
      this.subscribed = !this.subscribed;
      if (type == 1) this.$message.success("收藏成功");
      else this.$message.success("取消收藏成功");
      this.$store.dispatch("getMyPlayList");
    },
    //播放全部
    playAll(){
      this.$refs.listRef.playMusicAll();
    }
  },
};
</script>

<style lang="less" scoped>
.detail-desc {
  display: flex;
  .detail-img-wrapper {
    width: 180px;
    height: 180px;
  }
  .detail-desc-info {
    margin-left: 15px;
    width: 1000px;
    line-height: 24px;
    .author {
      margin: 5px 0;
      height: 24px;
      display: flex;
      .author-img {
        height: 24px;
      }
    }
    .info-btn {
      margin: 5px 0;
    }
  }
}
// 文字展开收起效果
.element {
  max-height: 20px;
  overflow: hidden;
  transition: max-height 0.5s;
}
:checked ~ .element {
  max-height: 666px;
}
input[type="checkbox"] {
  position: absolute;
  clip: rect(0 0 0 0);
}

:checked ~ .check-in {
  display: none;
}

:checked ~ .check-out {
  display: inline-block;
}

.check-out {
  display: none;
}

.check-in,
.check-out {
  color: #34538b;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .detail-search {
    display: none;
  }
  .info-btn {
    display: flex;
    flex-wrap: wrap;
    .btn {
      margin: 5px;
    }
  }
}
/deep/.el-tabs__item {
  font-size: 18px;
}
/deep/.el-tabs__item.is-active {
  color: #ff2727;
  font-size: 22px;
  font-weight: 500;
}
/deep/.el-tabs__item:hover {
  color: #ff2727;
  font-size: 22px;
  font-weight: 500;
}
/deep/.el-tabs__active-bar {
  background-color: #ff2727;
  height: 5px;
  border-radius: 50px;
}
</style>